<template>
  <div class="achart">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>图表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div
      id="charts"
      style="width: 800px; height: 600px"
    ></div>
  </div>
</template>
<script>
import { getyhfb } from '@/api/list';
export default {
  data() {
    return {
      yhfb: [],
      title: '用户分布',
      option: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '用户分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      },
    };
  },
  watch: {
    yhfb: {
      immediate: true,
      handler(newval) {
        this.option.series[0].data = newval;
      },
    },
    option: {
      deep: true,
      handler(newVal) {
        let myChart = this.$echarts.init(document.querySelector('#charts'));
        myChart.setOption(newVal);
      },
    },
  },
  methods: {
    async getyhfb() {
      const res = await getyhfb();
      let oooyhfb = res.data;
      console.log(oooyhfb.user_city);
      for (let item in oooyhfb.user_city) {
        let sss = {
          name: item,
          value: oooyhfb.user_city[item],
        };
        this.yhfb.push(sss);
      }
      console.log(this.yhfb);
    },
  },
  mounted() {
    let myChart = this.$echarts.init(document.querySelector('#charts'));
    myChart.setOption(this.option);
  },
  created() {
    this.getyhfb();
  },
};
</script>
<style lang="scss" scoped>
.achart {
  width: 100%;
  .header {
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
    .el-breadcrumb {
      margin-top: 15px;
      padding-left: 10px;
    }
  }
}
</style>
